<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="__ADMIN__/css/font.css">
    <link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
    <script type="text/javascript" src="__ADMIN__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
    <script type="text/javascript" src="__ADMIN__/js/cookie.js"></script>
    <script type="text/javascript" src="__ADMIN__/js/echarts.min.js"></script>
    <style type="text/css">
        body{position: relative;}
        #chart1{width: 90%;height: 45%;position: absolute;left: 3%;top:8%;}
        #form{width: 100%;height: 8%;position: absolute;top:0;}
        .layui-table td{font-size: 16px !important;}
        .layui-table th{font-size: 16px !important;font-weight: 800}
        .layui-form-select dl{z-index: 9999 !important}
    </style>
</head>
<body>
<div id="form">
    <form class="layui-form layui-form-pane" action="" style="text-align: center;">
        <div class="layui-form-item" style="margin-top:5px;">

            {include file="public/quick_date" /}

            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo2">查询</button>
            </div>
        </div>
    </form>
</div>
<div id="chart1"></div>

<script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate','table','jquery'], function(){
        var form = layui.form
                ,layer = layui.layer
                ,laydate = layui.laydate
                ,table = layui.table
                ,$ = layui.jquery;

        laydate.render({
            elem: '#start_date'
        });
        laydate.render({
            elem: '#end_date'
        });

        $('#order_type').val('{$order_type}');
        form.render();
        $('#manager_id').val('{$manager_id}');
        form.render();
    });
</script>


<script type="text/javascript">

    const option1 = {
//        color: ['#74d1fd', '#009ae4', '#0071c1'],
        // 设置图表的位置
        grid: {
            x: 40, // 左间距
            y: 60, // 上间距
            x1: 50, // 右间距
            y1: 30, // 下间距
            x2: 50, // 右间距
            y2: 30, // 下间距
            x3: 50, // 右间距
            y3: 30, // 下间距
            containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
        },

        title:{
            text:'全部小组客户数据'
        },
        // 提示框组件
        tooltip: {
            trigger: 'axis', // 触发类型, axis: 坐标轴触发
            axisPointer: {
                // 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
                // 其实是种简写，表示启用两个正交的轴的 axisPointer。
                type: 'none'
            },
            textStyle: {
                color: '#cdd3ee' // 文字颜色
            },
            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            // 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
            formatter: '{b}<br />{a0}: {c0} <br />{a1}: {c1} <br />{a2}: {c2} <br />{a3}: {c3} '
        },
        // 图例组件
        legend: {
            textStyle: { // 文本样式
                fontSize: 16,
                color: '#cdd3ee'
            },
            top: 20, // 定位
//            data: ['勤奋的小雪鲸（王）', '战神（罗）', '快乐星球（冯）', '奋斗的大鲸鱼（朱）'] // 图例的数据数组
            data: [{$group_name_str}] // 图例的数据数组
        },
        // X轴
        xAxis: {
            type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
            // 坐标轴刻度
            axisTick: {
                show: false // 是否显示坐标轴刻度 默认显示
            },
            // 坐标轴轴线
            axisLine: { // 是否显示坐标轴轴线 默认显示
                show: false // 是否显示坐标轴轴线 默认显示
            },
            // 坐标轴在图表区域中的分隔线
            splitLine: {
                show: false // 是否显示分隔线。默认数值轴显示
            },
            // 坐标轴刻度标签
            axisLabel: {
                show: false // 是否显示刻度标签 默认显示
            }
        },
        yAxis: [
            // 左侧Y轴
            {
                type: 'category', // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
                // 坐标轴刻度
                axisTick: {
                    show: false // 是否显示坐标轴刻度 默认显示
                },
                // 坐标轴轴线
                axisLine: { // 是否显示坐标轴轴线 默认显示
                    show: false, // 是否显示坐标轴轴线 默认显示
                    lineStyle: { // 坐标轴线线的颜色
                        color: '#cdd3ee'
                    }
                },
                // 坐标轴在图表区域中的分隔线
                splitLine: {
                    show: false // 是否显示分隔线。默认数值轴显示
                },
                // 坐标轴刻度标签
                axisLabel: {
                    show: true, // 是否显示刻度标签 默认显示
                    fontSize: 16, // 文字的字体大小
                    color: '#cdd3ee', // 刻度标签文字的颜色
                    // 使用字符串模板，模板变量为刻度默认标签 {value}
                    formatter: '{value}'
                },
                data: ['录入客户数', '保A数', '签单数', '已洽淡数'] // 类目数据，在类目轴（type: 'category'）中有效
            },
            // 右侧Y轴
            {
                type: 'category', // 坐标轴类型
                // 坐标轴轴线
                axisLine: {
                    show: false
                },
                // 坐标轴刻度
                axisTick: {
                    show: false
                },
                // 坐标轴刻度标签
                axisLabel: {
                    show: true, // 是否显示刻度标签 默认显示
                    fontSize: 16, // 文字的字体大小
                    color: '#cdd3ee', // 刻度标签文字的颜色
                    // 使用字符串模板，模板变量为刻度默认标签 {value}
                    formatter: '汇总 {value}'
                },
//                data: [1530,9,9,4336]
                data: [{$lr_sum},{$ba_sum},{$qd_sum},{$qt_sum}]
            }
        ],
        // 系列列表
        series: [
            {
                type: 'bar', // 系列类型
                name: '勤奋的小雪鲸（王）', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    // 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
                    position: 'inside'
                },
//                data: [325, 0, 2, 879] // 系列中的数据内容数组
                data: [{$w_str}] // 系列中的数据内容数组
            },

            {
                type: 'bar', // 系列类型
                name: '战神（罗）', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    // 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
                    position: 'inside'
                },
//                data: ['576','6','3','2191'] // 系列中的数据内容数组
                data: [{$l_str}] // 系列中的数据内容数组
            },

            {
                type: 'bar', // 系列类型
                name: '快乐星球（冯）', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    // 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
                    position: 'inside'
                },
//                data: [326, 0, 3, 660] // 系列中的数据内容数组
                data: [{$f_str}] // 系列中的数据内容数组
            },

            {
                type: 'bar', // 系列类型
                name: '奋斗的大鲸鱼（朱）', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    // 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']
                    position: 'inside'
                },
//                data: [303, 3, 1, 606] // 系列中的数据内容数组
                data: [{$z_str}] // 系列中的数据内容数组
            }
        ]
    }

    var chart1 = echarts.init(document.getElementById('chart1'));
    chart1.setOption(option1);

</script>

</body>
</html>